<template>
  <view class="bg-gradient-to-b from-blue-50 to-gray-50 min-h-screen w-[750rpx] p-[30rpx] box-border">
    <!-- Header -->
    <view class="text-center mb-[50rpx] p-[40rpx] bg-white rounded-[20rpx] shadow-lg border border-gray-100">
      <view class="w-[80rpx] h-[80rpx] bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-[20rpx]">
        <IconFont name="compass" class="text-white text-[40rpx]" />
      </view>
      <text class="text-[48rpx] font-bold text-gray-800 mb-[20rpx] block">页面导航中心</text>
      <text class="text-[28rpx] text-gray-600">点击按钮跳转到对应页面进行预览</text>
    </view>

    <!-- Navigation Buttons -->
    <view class="grid grid-cols-2 gap-[20rpx] mb-[30rpx]">
      <view 
        v-for="(page, key) in pageMap" 
        :key="key"
        class="bg-white rounded-[15rpx] p-[20rpx] shadow-sm border border-gray-100 cursor-pointer transition-all hover:shadow-lg hover:transform hover:-translate-y-[2rpx]"
        @click="navigateToPage(page.path)"
      >
        <view class="flex flex-col items-center text-center">
          <view class="w-[60rpx] h-[60rpx] bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center mb-[15rpx]">
            <IconFont :name="page.icon" class="text-white text-[28rpx]" />
          </view>
          <text class="text-[26rpx] font-medium text-gray-800 leading-[1.3]">{{ key }}</text>
          <text class="text-[22rpx] text-gray-500 mt-[5rpx]">点击预览</text>
        </view>
      </view>
    </view>

    <!-- Statistics -->
    <view class="bg-white rounded-[20rpx] p-[30rpx] shadow-lg border border-gray-100">
      <view class="flex justify-between items-center">
        <view class="text-center flex-1">
          <text class="text-[36rpx] font-bold text-blue-600 block">{{ Object.keys(pageMap).length }}</text>
          <text class="text-[24rpx] text-gray-500">总页面数</text>
        </view>
        <view class="w-[2rpx] h-[60rpx] bg-gray-200"></view>
        <view class="text-center flex-1">
          <text class="text-[36rpx] font-bold text-green-600 block">100%</text>
          <text class="text-[24rpx] text-gray-500">转换完成</text>
        </view>
        <view class="w-[2rpx] h-[60rpx] bg-gray-200"></view>
        <view class="text-center flex-1">
          <text class="text-[36rpx] font-bold text-purple-600 block">Vue3</text>
          <text class="text-[24rpx] text-gray-500">技术栈</text>
        </view>
      </view>
    </view>

    <!-- Footer -->
    <view class="text-center mt-[30rpx] p-[20rpx]">
      <text class="text-[24rpx] text-gray-400">© 2023 页面导航系统 | Taro + Vue3 + NutUI</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro'

// 页面映射表
const pageMap = {
  "认证页面": {
    path: "/pages/webs/certification",
    icon: "id-card"
  },
  "个人入住页面": {
    path: "/pages/webs/personal-entry",
    icon: "user-plus"
  },
  "个人中心页面": {
    path: "/pages/webs/personal-center",
    icon: "user"
  },
  "个人资料页面": {
    path: "/pages/webs/personal-profile",
    icon: "user-edit"
  },
  "会员充值页面": {
    path: "/pages/webs/member-recharge",
    icon: "crown"
  },
  "培训页面": {
    path: "/pages/webs/training",
    icon: "graduation-cap"
  },
  "签到页面": {
    path: "/pages/webs/check-in",
    icon: "clipboard-check"
  },
  "商家入驻页面": {
    path: "/pages/webs/merchant-entry",
    icon: "store"
  },
  "提现页面": {
    path: "/pages/webs/withdraw",
    icon: "money-bill-wave"
  },
  "推广页面": {
    path: "/pages/webs/promotion",
    icon: "share-alt"
  },
  "信用等级页面": {
    path: "/pages/webs/credit-level",
    icon: "medal"
  },
  "悬赏页面": {
    path: "/pages/webs/bounty",
    icon: "award"
  },
  "提出异议页面": {
    path: "/pages/webs/dispute",
    icon: "exclamation-triangle"
  },
  "注册页面": {
    path: "/pages/webs/register",
    icon: "smartphone"
  }
}

// 页面跳转
const navigateToPage = (path: string) => {
  Taro.navigateTo({
    url: path,
    success: () => {
      console.log(`跳转到页面: ${path}`)
    },
    fail: (err) => {
      console.error('页面跳转失败:', err)
      Taro.showToast({
        title: '页面跳转失败',
        icon: 'error'
      })
    }
  })
}
</script>